<template>
  <div>
    <div class="read-button-all">
      <el-tooltip
        class="item"
        effect="dark"
        content="全部标为已读"
        placement="top-end"
      >
        <el-button
          type="success"
          icon="el-icon-check"
          circle
          @click="readAllMessage()"
        >
        </el-button>
      </el-tooltip>
      <el-tooltip
        class="item"
        effect="dark"
        content="删除全部已读"
        placement="top-end"
      >
        <el-button type="danger" icon="el-icon-delete" circle></el-button>
      </el-tooltip>
    </div>
    <el-tabs v-model="activeName" @tab-click="getActiveName">
      <el-tab-pane label="未读" name="first">
        <div>
          <ul class="team-ul">
            <div class="team-ul-li">
              <li
                v-for="nonMessage in nonMessageList"
                :key="nonMessage.id"
                :value="nonMessage.content"
              >
                <div class="team-ul-name">{{ nonMessage.sentUsername }}:</div>
                <div class="read-button">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="标为已读"
                    placement="left-end"
                  >
                    <el-button
                      type="primary"
                      icon="el-icon-reading"
                      circle
                      @click="readMessage(nonMessage.id)"
                    ></el-button>
                  </el-tooltip>
                </div>
                <p class="team-ul-desc" style="margin-left: 30px">
                  {{ nonMessage.content }}
                </p>
                <p class="team-ul-time">时间：{{ nonMessage.createTime }}</p>
                <el-divider></el-divider>
              </li>
            </div>
          </ul>
        </div>
      </el-tab-pane>
      <el-tab-pane label="已读" name="second">
        <div>
          <ul class="team-ul">
            <div class="team-ul-li">
              <li
                v-for="alrMessage in alrMessageList"
                :key="alrMessage.id"
                :value="alrMessage.content"
              >
                <div class="team-ul-name">{{ alrMessage.sentUsername }}:</div>
                <div class="read-button">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="删除"
                    placement="left-end"
                  >
                    <el-button
                      type="danger"
                      icon="el-icon-delete"
                      @click="deleteMessage(alrMessage.id)"
                      circle
                    ></el-button>
                  </el-tooltip>
                </div>
                <p class="team-ul-desc" style="margin-left: 30px">
                  {{ alrMessage.content }}
                </p>
                <p class="team-ul-time">时间：{{ alrMessage.createTime }}</p>
                <el-divider></el-divider>
              </li>
            </div>
          </ul>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import {
  updateMessageRead,
  batchUpdateMessage,
  loDeleted,
} from "@/api/message";
export default {
  props: {
    alrMessageList: {
      type: Array,
      default: () => [],
    },
    nonMessageList: {
      type: Array,
      default: () => [],
    },
    listAchieveMessage: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    return {
      activeName: "first",
    };
  },
  methods: {
    async readMessage(messageId) {
      const param = {
        id: messageId,
        isRead: 1,
      };
      await updateMessageRead(param).then((res) => {
        if (res.code == 0) {
          this.$message({
            message: "已标为已读",
            type: "success",
          });
        }
      });
      this.listAchieveMessage();
      console.log(param);
    },
    readAllMessage() {
      var messageList = [];
      this.nonMessageList.forEach((nonMessage) => {
        nonMessage.isRead = 1;
        messageList.push(nonMessage);
      });
      console.log(messageList);
      batchUpdateMessage(this.nonMessageList).then((res) => {
        if (res.code == 0) {
          this.$message({
            message: "已全部标为已读",
            type: "success",
          });
        }
      });
      this.listAchieveMessage();
    },
    async deleteMessage(messageId) {
      const param = {
        id: messageId,
      };
      await loDeleted(param).then((res) => {
        if (res.code == 0) {
          this.$message({
            message: "已删除",
            type: "success",
          });
        }
      });
      this.listAchieveMessage();
    },
  },
};
</script>
<style scoped>
.item {
  margin-left: 30px;
}
.team-ul {
  max-height: 500px;
  width: 90%;
  margin-left: 20px;
  overflow: auto;
}
.team-ul-li :hover {
  background-color: rgb(233, 250, 250);
}
.team-ul-name {
  font-size: 14px;
  color: #898d91;
}
.team-ul-desc {
  font-size: 14px;
}
.team-ul-time {
  margin-top: 5px;
  font-size: 12px;
  color: #898d91;
}
.read-button {
  width: 15%;
  float: right;
  margin-right: 80px;
}
.read-button-all {
  margin-left: 80%;
}
</style>